import React, { useState ,useEffect} from 'react';
import type { MenuProps } from 'antd';
import { Menu } from 'antd';
import {menuData} from '@/utils/config';
import  Style  from './menu.module.scss';
import { useNavigate, useLocation } from 'react-router-dom';

type MenuItem = Required<MenuProps>['items'][number];

const items: MenuItem[] = menuData.map(e=>{
  return {
    key: e.path, 
    label: e.alias,
    children: e.children?.map(child=>{
      return {
        key: child.path,
        label: child.alias,
      }
    })
  };
}) 

const MyMenu: React.FC = () => {
  const navigate = useNavigate();
  const location = useLocation(); // 获取当前路由信息
  const [current, setCurrent] = useState(location.pathname); // 初始化时选中当前路径
  const onClick: MenuProps['onClick'] = (e) => {
    setCurrent(`/home${e.key}`);
    navigate(`/home${e.key}`);
  };
  useEffect(() => {
    setCurrent(location.pathname); // 路由变化时更新选中的菜单项
  }, [location.pathname]);

  return (
    <div>
      <img className={Style.log} src="/logo512.png" alt="" />
      <Menu
        defaultSelectedKeys={['1']}
        defaultOpenKeys={['sub1']}
        mode="inline"
        theme="dark"
        items={items}
        onClick={onClick}
      />
    </div>
  );
};

export default MyMenu;